<template>
  <div>

    <el-container>
      <el-header>
        <el-row justify="start">
          <el-col :span="4">
            <div>
              <el-input
                  placeholder="请输入内容"
                  v-model="search"
                  clearable>
              </el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button @click="refresh">刷新</el-button>
              <el-button @click="add">新增版本</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>

        <el-row justify="start">
          <el-col :span="24">
            <div class="">
              <el-table
                  :data="this.tableData"
                  :onCell-click="this.cellClick"
                  style="width: 100%">
                <el-table-column
                    fixed
                    prop="processCode"
                    label="编码">
                </el-table-column>
                <el-table-column
                    prop="processName"
                    label="名称">
                </el-table-column>
                <el-table-column
                    prop="processVersion"
                    label="版本">
                </el-table-column>

                <el-table-column
                    prop="description"
                    label="描述">
                </el-table-column>

                <el-table-column
                    prop="latestFlag"
                    label="latest"
                >
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.latestFlag === '1' ? 'latest' : ''"
                        disable-transitions
                    >{{ scope.row.latestFlag == '1' ? 'latest' : '' }}
                    </el-tag
                    >
                  </template>
                </el-table-column>

                <el-table-column
                    prop="disableFlag"
                    label="启停状态"
                >
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.disableFlag === '0' ? '启用' : '停用'"
                        disable-transitions
                    >{{ scope.row.disableFlag == '0' ? '启用' : '停用' }}
                    </el-tag
                    >
                  </template>
                </el-table-column>

                <el-table-column
                    fixed="right"
                    label="操作"
                    width="400">
                  <template #default="scope">
                    <el-button @click="setStatusFlag(scope.row)" type="default" size="small">
                      {{ scope.row.disableFlag == '0' ? '停用' : '启用' }}
                    </el-button>
                    <el-button @click="setLatestFlag(scope.row)" type="default" size="small">
                      {{ scope.row.latestFlag == '1' ? 'unlatest' : 'latest' }}
                    </el-button>
                    <!--                      <el-button @click="handleClick(scope.row)" type="default" size="small">查看</el-button>-->
                    <el-button @click="edit(scope.row)" type="default" size="small">编辑</el-button>
                    <el-button @click="config(scope.row)" type="default" size="small">配置</el-button>
                    <el-button @click="remove(scope.row)" type="default" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-col>
        </el-row>

      </el-main>


      <el-dialog v-model="versionDiag.visible" width="300px">
        <el-form :model="versionDiag">
          <el-form-item label="版本">
            <el-input v-model="versionDiag.processVersion" :disabled="this.versionDiag.id!=null" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="versionDiag.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="versionDiag.visible = false">取 消</el-button>
          <el-button type="primary" @click="this.save">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>

</template>

<script>
import {post} from '../../config/Request.js'
import {h} from "vue";
import apis from "@/request/apis.js";

export default {
  name: "ProcessVersionManager",
  components: {},
  props: [],
  data() {
    return {
      processId: null,
      tableData: [],
      versionDiag: {
        visible: false,
        viewFlag: false,
        id: null,
        processId: null,
        processVersion: '',
        description: ''
      }
    };
  },

  mounted() {
  },
  methods: {
    refresh() {
      this.queryList(this.processId);
    },
    add() {
      this.versionDiag.visible = true;

    },
    async edit(row) {
      const data = await apis.post("/square-lake/process/version/get_by_id", {
        id: row.id
      });
      this.versionDiag = data;
      this.versionDiag.visible = true;
      this.processId= this.versionDiag.processId;

    },
   async remove(row){
       await apis.post("/square-lake/process/version/remove_by_id", {
        id: row.id
      });
      this.refresh();
    },
    config(row){
      this.$router.push({
        name: "flow", query: {
          id: row.id
        }
      });
    },
    async save() {

      if (this.versionDiag.viewFlag) {
        this.versionDiag.viewFlag = false;
        this.versionDiag.visible = false;
        return
      }
      if (!this.processId) {
        this.$message.error('错误操作，没有获取到流程ID');
        return;
      }
      this.versionDiag.processId = this.processId;

      if (!this.versionDiag.processVersion) {
        this.$message.error('请输入版本');
        return;
      }
      // if (!this.compDiag.compFile) {
      //   this.$message.error('请选择组件包');
      //   return;
      // }
      await apis.post("/square-lake/process/version/save", this.versionDiag);

      this.versionDiag.processVersion = '';
      this.versionDiag.description = '';
      this.versionDiag.visible = false;
      this.versionDiag.id = null;
      this.refresh();
    },
    async setStatusFlag(row) {
      await apis.post("/square-lake/process/version/set_status_flag", {
        id: row.id, disableFlag:
            row.disableFlag == '1' ? '0' : '1'
      });
      this.refresh();
    },
    async setLatestFlag(row){
      await apis.post("/square-lake/process/version/set_latest_flag", {
        id: row.id, latestFlag:
            row.latestFlag == '1' ? '0' : '1'
      });
      this.refresh();
    },
    async queryList(processId) {
      this.processId = processId;
      const data = await apis.post("/square-lake/process/version/list", {
        processId: processId
      })
      // console.log(data);
      // this.$set(this, "tableData", data);
      this.tableData = data;

    }
  }
}
</script>

<style scoped>

</style>